<template>
  <div class="login-container">
    <!-- 背景装饰 -->
    <div class="background-decoration">
      <div class="decoration-circle decoration-circle-1"></div>
      <div class="decoration-circle decoration-circle-2"></div>
      <div class="decoration-circle decoration-circle-3"></div>
    </div>
    
    <!-- 主要内容区域 -->
    <div class="login-content">
      <!-- 左侧品牌区域 -->
      <div class="brand-section">
        <div class="brand-content">
          <!-- Logo区域 -->
          <div class="logo-container">
            <div class="logo-icon">
              <svg width="48" height="48" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M12 2L2 7L12 12L22 7L12 2Z" stroke="currentColor" stroke-width="2" stroke-linejoin="round"/>
                <path d="M2 17L12 22L22 17" stroke="currentColor" stroke-width="2" stroke-linejoin="round"/>
                <path d="M2 12L12 17L22 12" stroke="currentColor" stroke-width="2" stroke-linejoin="round"/>
              </svg>
            </div>
            <h1 class="brand-title">管理系统</h1>
          </div>
          
          <!-- 描述文本 -->
          <div class="brand-description">
            <h2>欢迎回来</h2>
            <p>现代化的企业级管理平台，为您提供安全、高效、易用的管理体验。</p>
          </div>
          
          <!-- 特性列表 -->
          <div class="features-list">
            <div class="feature-item">
              <div class="feature-icon">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M9 12L11 14L15 10" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                  <path d="M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z" stroke="currentColor" stroke-width="2"/>
                </svg>
              </div>
              <span>安全可靠的数据保护</span>
            </div>
            <div class="feature-item">
              <div class="feature-icon">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M13 2L3 14H12L11 22L21 10H12L13 2Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
              </div>
              <span>高效的操作体验</span>
            </div>
            <div class="feature-item">
              <div class="feature-icon">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M17 21V19C17 17.9391 16.5786 16.9217 15.8284 16.1716C15.0783 15.4214 14.0609 15 13 15H5C3.93913 15 2.92172 15.4214 2.17157 16.1716C1.42143 16.9217 1 17.9391 1 19V21" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                  <circle cx="9" cy="7" r="4" stroke="currentColor" stroke-width="2"/>
                  <path d="M23 21V19C23 18.1645 22.7155 17.3541 22.2094 16.6977C21.7033 16.0414 20.9999 15.5759 20.2 15.3726" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                  <path d="M16 3.13C16.8003 3.33246 17.5037 3.79799 18.0098 4.45435C18.5159 5.11071 18.8004 5.92111 18.8004 6.75665C18.8004 7.59219 18.5159 8.40259 18.0098 9.05895C17.5037 9.71531 16.8003 10.1808 16 10.3833" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
              </div>
              <span>多用户协作管理</span>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 右侧登录表单区域 -->
      <div class="form-section">
        <div class="form-container">
          <!-- 表单头部 -->
          <div class="form-header">
            <h2 class="form-title">登录账户</h2>
            <p class="form-subtitle">请输入您的凭据以访问您的账户</p>
          </div>
          
          <!-- 登录表单 -->
          <div class="form-content">
            <el-form
              ref="loginFormRef"
              :model="loginForm"
              :rules="loginRules"
              class="login-form"
            >
              <el-form-item prop="username" class="form-item">
                <label class="form-label">用户名</label>
                <el-input
                  v-model="loginForm.username"
                  placeholder="请输入用户名"
                  size="large"
                  class="form-input"
                >
                  <template #prefix>
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M20 21V19C20 17.9391 19.5786 16.9217 18.8284 16.1716C18.0783 15.4214 17.0609 15 16 15H8C6.93913 15 5.92172 15.4214 5.17157 16.1716C4.42143 16.9217 4 17.9391 4 19V21" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                      <circle cx="12" cy="7" r="4" stroke="currentColor" stroke-width="2"/>
                    </svg>
                  </template>
                </el-input>
              </el-form-item>
              
              <el-form-item prop="password" class="form-item">
                <label class="form-label">密码</label>
                <el-input
                  v-model="loginForm.password"
                  type="password"
                  placeholder="请输入密码"
                  size="large"
                  show-password
                  class="form-input"
                >
                  <template #prefix>
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <rect x="3" y="11" width="18" height="11" rx="2" ry="2" stroke="currentColor" stroke-width="2"/>
                      <circle cx="12" cy="16" r="1" stroke="currentColor" stroke-width="2"/>
                      <path d="M7 11V7C7 5.67392 7.52678 4.40215 8.46447 3.46447C9.40215 2.52678 10.6739 2 12 2C13.3261 2 14.5979 2.52678 15.5355 3.46447C16.4732 4.40215 17 5.67392 17 7V11" stroke="currentColor" stroke-width="2"/>
                    </svg>
                  </template>
                </el-input>
              </el-form-item>
              
              <el-form-item prop="captcha" class="form-item">
                <label class="form-label">验证码</label>
                <div class="captcha-container">
                  <el-input
                    v-model="loginForm.captcha"
                    placeholder="请输入验证码"
                    size="large"
                    class="captcha-input"
                  >
                    <template #prefix>
                      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M9 12L11 14L15 10" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                        <path d="M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z" stroke="currentColor" stroke-width="2"/>
                      </svg>
                    </template>
                  </el-input>
                  <div class="captcha-image" @click="refreshCaptcha">
                    <img 
                      v-if="captchaImage" 
                      :src="captchaImage" 
                      alt="验证码"
                    />
                    <div v-else class="captcha-placeholder">
                      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M1 12S5 4 12 4S23 12 23 12S19 20 12 20S1 12 1 12Z" stroke="currentColor" stroke-width="2"/>
                        <circle cx="12" cy="12" r="3" stroke="currentColor" stroke-width="2"/>
                      </svg>
                      <span>点击获取</span>
                    </div>
                  </div>
                </div>
              </el-form-item>
              
              <el-form-item class="form-item">
                <el-button
                  type="primary"
                  size="large"
                  :loading="loading"
                  @click="handleLogin"
                  class="login-button"
                >
                  <span v-if="!loading">登录</span>
                  <span v-else>登录中...</span>
                </el-button>
              </el-form-item>
            </el-form>
            
            <!-- 测试账号提示 -->
            <div class="demo-account">
              <div class="demo-account-header">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
                  <path d="M12 6V12L16 14" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
                <span>演示账号</span>
              </div>
              <p>用户名：<code>admin</code> 密码：<code>123456</code></p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { useUserStore } from '@/stores/user'
import { authAPI } from '@/api/auth'

const router = useRouter()
const userStore = useUserStore()

const loginFormRef = ref()
const loading = ref(false)
const captchaImage = ref('')
const captchaKey = ref('')

const loginForm = reactive({
  username: 'admin',
  password: 'admin123',
  captcha: '',
  captchaKey: ''
})

const loginRules = {
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' }
  ],
  captcha: [
    { required: true, message: '请输入验证码', trigger: 'blur' }
  ]
}

// 获取验证码
const getCaptcha = async () => {
  try {
    const result = await authAPI.getCaptcha()
    if (result.success) {
      captchaImage.value = result.data.captchaImage
      captchaKey.value = result.data.captchaKey
      loginForm.captchaKey = result.data.captchaKey
    } else {
      ElMessage.error(result.message || '获取验证码失败')
    }
  } catch (error) {
    console.error('获取验证码失败:', error)
    ElMessage.error('获取验证码失败，请稍后重试')
  }
}

// 刷新验证码
const refreshCaptcha = () => {
  loginForm.captcha = ''
  getCaptcha()
}

// 处理登录
const handleLogin = async () => {
  if (!loginFormRef.value) return
  
  try {
    await loginFormRef.value.validate()
    
    if (!captchaKey.value) {
      ElMessage.error('请先获取验证码')
      await getCaptcha()
      return
    }
    
    loading.value = true
    
    const result = await userStore.login({
      username: loginForm.username,
      password: loginForm.password,
      captcha: loginForm.captcha,
      captchaKey: captchaKey.value
    })
    
    if (result.success) {
      ElMessage.success(result.message || '登录成功')
      router.push('/admin/dashboard')
    } else {
      ElMessage.error(result.message || '登录失败')
      // 登录失败后刷新验证码
      refreshCaptcha()
    }
  } catch (error) {
    console.error('登录失败:', error)
    ElMessage.error('登录失败，请稍后重试')
    refreshCaptcha()
  } finally {
    loading.value = false
  }
}

onMounted(() => {
  getCaptcha()
})
</script>

<style scoped>
/* shadcn风格的登录页面样式 */
.login-container {
  position: relative;
  min-height: 100vh;
  background: hsl(0 0% 100%);
  overflow: hidden;
}

/* 背景装饰 */
.background-decoration {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 0;
}

.decoration-circle {
  position: absolute;
  border-radius: 50%;
  background: linear-gradient(135deg, hsl(221.2 83.2% 53.3% / 0.1), hsl(212.7 26.8% 83.9% / 0.1));
  animation: float 6s ease-in-out infinite;
}

.decoration-circle-1 {
  width: 300px;
  height: 300px;
  top: -150px;
  left: -150px;
  animation-delay: 0s;
}

.decoration-circle-2 {
  width: 200px;
  height: 200px;
  top: 20%;
  right: -100px;
  animation-delay: 2s;
}

.decoration-circle-3 {
  width: 150px;
  height: 150px;
  bottom: 10%;
  left: 10%;
  animation-delay: 4s;
}

@keyframes float {
  0%, 100% {
    transform: translateY(0px) rotate(0deg);
  }
  50% {
    transform: translateY(-20px) rotate(180deg);
  }
}

/* 主要内容区域 */
.login-content {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 100vh;
  z-index: 1;
}

/* 左侧品牌区域 */
.brand-section {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  background: linear-gradient(135deg, hsl(221.2 83.2% 53.3%), hsl(212.7 26.8% 83.9%));
  color: hsl(210 40% 98%);
}

.brand-content {
  max-width: 480px;
  width: 100%;
}

/* Logo区域 */
.logo-container {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 3rem;
}

.logo-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  background: hsl(210 40% 98% / 0.1);
  border-radius: 12px;
  backdrop-filter: blur(10px);
  border: 1px solid hsl(210 40% 98% / 0.2);
}

.logo-icon svg {
  color: hsl(210 40% 98%);
}

.brand-title {
  font-size: 1.875rem;
  font-weight: 700;
  margin: 0;
  color: hsl(210 40% 98%);
}

/* 品牌描述 */
.brand-description {
  margin-bottom: 3rem;
}

.brand-description h2 {
  font-size: 2.25rem;
  font-weight: 700;
  margin: 0 0 1rem 0;
  color: hsl(210 40% 98%);
  line-height: 1.2;
}

.brand-description p {
  font-size: 1.125rem;
  color: hsl(210 40% 98% / 0.8);
  line-height: 1.6;
  margin: 0;
}

/* 特性列表 */
.features-list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.feature-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  background: hsl(210 40% 98% / 0.1);
  border-radius: 8px;
  backdrop-filter: blur(10px);
  border: 1px solid hsl(210 40% 98% / 0.2);
  transition: all 0.2s ease-in-out;
}

.feature-item:hover {
  background: hsl(210 40% 98% / 0.15);
  transform: translateY(-2px);
}

.feature-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: hsl(210 40% 98% / 0.2);
  border-radius: 8px;
  flex-shrink: 0;
}

.feature-icon svg {
  color: hsl(210 40% 98%);
}

.feature-item span {
  font-size: 1rem;
  font-weight: 500;
  color: hsl(210 40% 98%);
}

/* 右侧表单区域 */
.form-section {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  background: hsl(0 0% 100%);
}

.form-container {
  width: 100%;
  max-width: 400px;
}

/* 表单头部 */
.form-header {
  text-align: center;
  margin-bottom: 2rem;
}

.form-title {
  font-size: 1.875rem;
  font-weight: 700;
  color: hsl(222.2 84% 4.9%);
  margin: 0 0 0.5rem 0;
  line-height: 1.2;
}

.form-subtitle {
  font-size: 0.875rem;
  color: hsl(215.4 16.3% 46.9%);
  margin: 0;
  line-height: 1.5;
}

/* 表单内容 */
.form-content {
  width: 100%;
}

.login-form {
  width: 100%;
}

.form-item {
  margin-bottom: 1.5rem;
}

.form-item:last-child {
  margin-bottom: 0;
}

.form-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  color: hsl(222.2 84% 4.9%);
  margin-bottom: 0.5rem;
}

/* 自定义Element Plus输入框样式 */
.form-input :deep(.el-input__wrapper) {
  border-radius: 6px;
  border: 1px solid hsl(214.3 31.8% 91.4%);
  box-shadow: none;
  transition: all 0.2s ease-in-out;
  background: hsl(0 0% 100%);
}

.form-input :deep(.el-input__wrapper:hover) {
  border-color: hsl(221.2 83.2% 53.3%);
}

.form-input :deep(.el-input__wrapper.is-focus) {
  border-color: hsl(221.2 83.2% 53.3%);
  box-shadow: 0 0 0 2px hsl(221.2 83.2% 53.3% / 0.2);
}

.form-input :deep(.el-input__inner) {
  color: hsl(222.2 84% 4.9%);
  font-size: 0.875rem;
}

.form-input :deep(.el-input__inner::placeholder) {
  color: hsl(215.4 16.3% 46.9%);
}

.form-input :deep(.el-input__prefix) {
  color: hsl(215.4 16.3% 46.9%);
}

/* 验证码容器 */
.captcha-container {
  display: flex;
  gap: 0.75rem;
  align-items: flex-end;
}

.captcha-input {
  flex: 1;
}

.captcha-input :deep(.el-input__wrapper) {
  border-radius: 6px;
  border: 1px solid hsl(214.3 31.8% 91.4%);
  box-shadow: none;
  transition: all 0.2s ease-in-out;
}

.captcha-input :deep(.el-input__wrapper:hover) {
  border-color: hsl(221.2 83.2% 53.3%);
}

.captcha-input :deep(.el-input__wrapper.is-focus) {
  border-color: hsl(221.2 83.2% 53.3%);
  box-shadow: 0 0 0 2px hsl(221.2 83.2% 53.3% / 0.2);
}

/* 验证码图片 */
.captcha-image {
  width: 120px;
  height: 40px;
  border: 1px solid hsl(214.3 31.8% 91.4%);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background: hsl(210 40% 98%);
  transition: all 0.2s ease-in-out;
  overflow: hidden;
}

.captcha-image:hover {
  border-color: hsl(221.2 83.2% 53.3%);
  background: hsl(221.2 83.2% 53.3% / 0.05);
}

.captcha-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.captcha-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  color: hsl(215.4 16.3% 46.9%);
}

.captcha-placeholder span {
  font-size: 0.75rem;
  font-weight: 500;
}

/* 登录按钮 */
.login-button {
  width: 100%;
  height: 40px;
  background: hsl(221.2 83.2% 53.3%);
  border: 1px solid hsl(221.2 83.2% 53.3%);
  border-radius: 6px;
  color: hsl(210 40% 98%);
  font-weight: 500;
  font-size: 0.875rem;
  transition: all 0.2s ease-in-out;
}

.login-button:hover {
  background: hsl(221.2 83.2% 53.3% / 0.9);
  border-color: hsl(221.2 83.2% 53.3% / 0.9);
}

.login-button:active {
  background: hsl(221.2 83.2% 53.3% / 0.8);
  border-color: hsl(221.2 83.2% 53.3% / 0.8);
}

.login-button.is-loading {
  background: hsl(221.2 83.2% 53.3% / 0.7);
  border-color: hsl(221.2 83.2% 53.3% / 0.7);
}

/* 演示账号提示 */
.demo-account {
  margin-top: 2rem;
  padding: 1rem;
  background: hsl(210 40% 98%);
  border: 1px solid hsl(214.3 31.8% 91.4%);
  border-radius: 8px;
}

.demo-account-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
  color: hsl(215.4 16.3% 46.9%);
}

.demo-account-header span {
  font-size: 0.875rem;
  font-weight: 500;
}

.demo-account p {
  margin: 0;
  font-size: 0.875rem;
  color: hsl(215.4 16.3% 46.9%);
  line-height: 1.5;
}

.demo-account code {
  background: hsl(210 40% 96%);
  color: hsl(222.2 84% 4.9%);
  padding: 0.125rem 0.25rem;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 500;
  border: 1px solid hsl(214.3 31.8% 91.4%);
}

/* 表单验证错误样式 */
.form-item :deep(.el-form-item__error) {
  color: hsl(0 84.2% 60.2%);
  font-size: 0.75rem;
  margin-top: 0.25rem;
}

.form-item.is-error :deep(.el-input__wrapper) {
  border-color: hsl(0 84.2% 60.2%);
}

.form-item.is-error :deep(.el-input__wrapper.is-focus) {
  border-color: hsl(0 84.2% 60.2%);
  box-shadow: 0 0 0 2px hsl(0 84.2% 60.2% / 0.2);
}

/* 响应式设计 */
@media (max-width: 1024px) {
  .login-content {
    grid-template-columns: 1fr;
  }
  
  .brand-section {
    display: none;
  }
  
  .form-section {
    min-height: 100vh;
  }
}

@media (max-width: 640px) {
  .form-section {
    padding: 1rem;
  }
  
  .form-container {
    max-width: 100%;
  }
  
  .form-title {
    font-size: 1.5rem;
  }
  
  .captcha-container {
    flex-direction: column;
    align-items: stretch;
  }
  
  .captcha-image {
    width: 100%;
    height: 50px;
  }
}
</style>